const path = require("path")
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 插件自动生成一个 HTML 文件
// 如果在 webpack 的输出中有任何 CSS 资源
// （例如，使用 MiniCssExtractPlugin 提取的 CSS），
// 那么这些资源也会在 HTML 文件 <head> 元素中的 <link> 标签内引入。

// module.exports common js规范
module.exports = {
    entry: "./src/main.js", // 修改入口
    // 指定一个 output 字段，来配置输出过程
    output: {
      path: path.resolve(__dirname, 'dist'),
      // __dirname当前文件的绝对路径
      // 出口路径
      filename: 'bundle.js', // 出口文件名
      clean: true// 在每次打包之前，会清空  出口文件夹
    },
    plugins: [new HtmlWebpackPlugin(
      {
        //自定义打包的html模版，和输出文件名字
        template: './public/index.html',
        filename: 'index.html'
      }
    )],
    module: {
      rules: [ // loader的规则
        {
          test: /\.css$/i, // 匹配所有的css文件
          // 先用 css-loader 让webpack能够识别 css 文件的内容并打包
          // 再用 style-loader 将样式, 把css插入到dom中
          // use数组里从右向左运行
          use: [ "style-loader", "css-loader"]
        },

        {
          test: /\.less$/i,
          use: [
            // compiles Less to CSS
            // 把less文件变异成css文件，解析，把样式插入到DOM中
            'style-loader',
            'css-loader',
            'less-loader',
          ],
        },
        // 图片部分
        {
          test: /\.(png|svg|jpg|jpeg|gif)$/i,
          // asset /resource 会直接把文件输出dist目录下
          // asset /inline 会把图片转化成  base64字符串
          // asset  小于8kb的 文件，会被视为inline ，否则会被视为resource
          // 如果图片太大，转化为base64 体积会增大30%左右
          type: 'asset',
        },
        // 字体图标部分
        {
          test: /\.(woff|woff2|eot|ttf|otf|svg)$/i,
          type: 'asset/resource',
          // asset /resource 会直接把文件输出dist目录下

          //自定义输出文件名
          generator: {
            filename: 'tubiao/[name].[hash:6][ext]'
            //     自定义的输出文件名/原图标名字
            // [hash]唯一标识,6 表示6位唯一标识
          }
        },
      ]
  }
}